<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${info.hotel_name} | 订单信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="icon" href="assets/img/favicon.jpg" sizes="32x32">
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <style>
        .layui-form-select dl dd.layui-this {
            background-color: #9CCC65
        }

        .module input:not(.btn), .module .theme-select {
            background-color: floralwhite !important
        }
    </style>
</head>
<body>
<div class="wrapper">
    <!-- header -->
    <header class="header">
        <div class="header-bottom">
            <nav class="navbar navbar-universal navbar-custom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="/desk/welcome" class="navbar-brand page-scroll">
                                    <img width="143px" height="49px" src="/download/${info.icon}" alt="logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="navbar-header">
                                <button type="button" data-toggle="collapse" data-target=".navbar-main-collapse"
                                        class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span
                                        class="icon-bar"></span><span class="icon-bar"></span><span
                                        class="icon-bar"></span></button>
                            </div>
                            <div class="collapse navbar-collapse navbar-main-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="/desk/welcome">主页</a></li>
                                    <%--                                    <li><a href="/desk/reservation">房间预定</a></li>--%>
                                    <li><a href="javascript:;" style="color: #9CCC65">查询预定</a></li>
                                    <li><a href="/desk/about">关于我们</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <!-- /header -->
    <!-- breadcrumbs -->
    <section class="breadcrumbs" style="background-image: url(assets/images/breadcrumbs/best-room.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1 class="h1">订单信息</h1>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li><a href="/desk/welcome">主页</a><i class="fa fa-angle-right"></i></li>
                        <li><a href="/desk/reservation">类型</a><i class="fa fa-angle-right"></i></li>
                        <li>房间详情<i class="fa fa-angle-right"></i></li>
                        <li class="active">订单信息</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!-- /breadcrumbs -->
    <!-- room details-->
    <section class="room-detail">
        <div class="container">
            <div class="row">
                <div class="col-lg-12"><h2 class="h2">订单详情</h2></div>
                <div class="col-lg-12 col-md-12">
                    <c:forEach var="order" items="${orders}">
                        <div class="room-detail_overview"
                             style="border: 2px dotted darkcyan;padding: 5px;border-radius: 10px;margin:10px 0">
                            <table class="layui-table" lay-skin="row">
                                <tr>
                                    <td><strong>订单号</strong></td>
                                    <td>${order.ordernumber}</td>
                                </tr>
                                <tr>
                                    <td><strong>联系人</strong></td>
                                    <td>${order.realname}</td>
                                </tr>
                                <tr>
                                    <td><strong>预留电话</strong></td>
                                    <td>${order.phone}</td>
                                </tr>
                                <tr>
                                    <td><strong>房间类型</strong></td>
                                    <td>${order.tname}</td>
                                </tr>
                                <tr>
                                    <td><strong>房间数量</strong></td>
                                    <td>${order.room_number}</td>
                                </tr>
                                <tr>
                                    <td><strong>预定入住日期</strong></td>
                                    <td><fmt:formatDate
                                            value="${order.predict_in_time}" type="date" pattern="yyyy-MM-dd"
                                            dateStyle="medium"/></td>
                                </tr>
                                <tr>
                                    <td><strong>预定离店日期</strong></td>
                                    <td><fmt:formatDate
                                            value="${order.predict_out_time}" type="date" pattern="yyyy-MM-dd"
                                            dateStyle="medium"/></td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="text-align: center;"><strong>请于<fmt:formatDate
                                            value="${order.predict_in_time}" type="date" pattern="yyyy-MM-dd"
                                            dateStyle="medium"/>当天下午2点之后到店</strong>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="text-align: center;"><strong>请保存本页凭证</strong>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </c:forEach>
                </div>

            </div>
        </div>
    </section>
    <!-- /room details -->
    <!-- footer -->
    <footer class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_logo">
                            <a href="/desk/welcome">
                                <img width="143px" height="49px" src="/download/${info.icon}">
                            </a>
                        </div>
                        <div class="footer-top_txt">
                            <p id="web-footer-intro">${info.hotel_intro_long}</p>
                        </div>
                        <div class="footer-top_address">
                            <div><i class="fa fa-phone"></i> 电话: <span>${info.hotel_phone}</span></div>
                            <div><i class="fa fa-home"></i> 地址: <span>${info.hotel_address}</span></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_rooms">
                            <ul>
                                <c:forEach var="m" items="${roomType}" begin="0" end="2">
                                    <li>
                                        <div class="rooms_img">
                                            <a href="/desk/reserveOne?id=${m.id}">
                                                <img src="assets/images/footer/1.jpg">
                                            </a>
                                        </div>
                                        <div class="rooms_info">
                                            <div class="rooms_t"><a href="/desk/reserveOne?id=${m.id}">${m.name}</a>
                                            </div>
                                            <div class="rooms_props"><span>￥${m.price}</span></div>
                                        </div>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_copy">Copyright &copy; 2020 huayue.com
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_links">
                            <a href="/desk/welcome">主页</a>
                            <a class="active" href="javascript:;">预定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- /footer -->
<!-- Scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script>
    function getNewData(dateTemp, days) {
        var dateTemp = dateTemp.split("-");
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
        var rDate = new Date(millSeconds);
        var year = rDate.getFullYear();
        var month = rDate.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var date = rDate.getDate();
        if (date < 10) date = "0" + date;
        return (year + "-" + month + "-" + date);
    }

    function dateFormat(date) {
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate())
    }


    //获得天数
    function GetNumberOfDays(date1, date2) {
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date(date2));
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));
        return day
    }

    var themeColor = "#9CCC65";

    layui.use(['form', 'laydate', 'slider', 'jquery', 'carousel'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , slider = layui.slider
            , $ = layui.jquery
            , carousel = layui.carousel;
        form.render();
        //图片轮播
        carousel.render({
            elem: '#carousel-img'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
        });
        var nowDate = new Date();

        var chooseDate = dateFormat(nowDate);

        var startDate = laydate.render({
            elem: '#inDate'
            , min: 0
            , max: 14
            , value: new Date()
            , theme: themeColor
            , done: function (value, date) {
                endDate.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
                $("#outDate").val(getNewData(value, 1));
                checkPrice();
            }
        });

        var endDate = laydate.render({
            elem: '#outDate'
            , min: 0
            , max: 14
            , theme: themeColor
            , value: getNewData(dateFormat(nowDate), 1)
            , done: function (value, date) {
                checkPrice()
            }
        });


        form.on('select(roomNumber)', function (data) {
            checkPrice();
        })
    });


    function checkPrice() {
        var rn = $("#roomNumber").val();
        var p = $("#price").html();
        var day = GetNumberOfDays($("#inDate").val(), $("#outDate").val());
        var price = Number(rn) * Number(p) * Number(day);
        $("#allPrice").text(price.toFixed(2));
    }


</script>
<!-- /Scripts -->
</body>
</html>

